<template>
  <div style="width: 100%; height: 100%">
    <el-table :data="tableData" stripe height="100%" highlight-current-row @current-change="loadCurrent">
      <el-table-column
        v-for="column in tableColumns"
        :key="column.code"
        :prop="column.code"
        :label="column.name"
        :width="column.width ? column.width : 100"
        :formatter="
          (row, column, cellValue, index) => {
            return cell_formatter(column, cellValue, tableColumns)
          }
        "
      />
      <el-table-column width="200" label="操作">
        <template #default="scope">
          <el-button
            type="primary"
            :disabled="scope.row.order_qty - scope.row.arrived_qty === 0"
            @click="show_reserv = true"
            size="small"
            >预留</el-button
          >
          <el-button @click="print(scope.row)" size="small">打印</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog v-model="show_reserv" title="预留">
      <el-card style="padding-left: 10px; padding-right: 10px">
        <el-row :gutter="10">
          <el-col :span="4">
            <el-statistic :value="currentRequireOrder?.order_qty" title="订单数量"></el-statistic>
          </el-col>
          <el-col :span="4">
            <div>
              <el-statistic :value="currentRequireOrder?.stockout_qty" title="已发数量"></el-statistic>
            </div>
          </el-col>
          <el-col :span="4">
            <div>
              <el-statistic :value="currentRequireOrder?.locked_qty" title="锁定数"></el-statistic>
            </div>
          </el-col>
          <el-col :span="4">
            <div>
              <el-statistic :value="currentRequireOrder?.reserved_qty" title="已预留数"></el-statistic>
            </div>
          </el-col>
          <el-col :span="4">
            <div>
              <el-statistic :value="getRequireReservable(currentRequireOrder)" title="可预留数"></el-statistic>
            </div>
          </el-col>
        </el-row>
      </el-card>
      <div style="height: 4px"></div>
      <el-card>
        <el-table :data="reserv_candidates" height="300px" style="width: 100%">
          <el-table-column
            v-for="column in t_reserv_candidates_define"
            :key="column.code"
            :prop="column.code"
            :label="column.name"
            :width="column.width ? column.width : 100"
            :formatter="
              (row, column, cellValue, index) => {
                return cell_formatter(column, cellValue, t_reserv_candidates_define)
              }
            "
          />
          <el-table-column label="操作" width="140">
            <template #default="scope">
              <el-button
                :disabled="scope.row.reservable === 0 || getRequireReservable(currentRequireOrder) === 0"
                size="small"
                type="primary"
                @click="reserv(scope.row)"
                >预留</el-button
              >
              <el-button :disabled="scope.row.myreserved === 0" @click="un_reserv(scope.row)" size="small">释放</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
      <template #footer>
        <el-button @click="show_reserv = false">关闭</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import { require_order_define, t_reserv_candidates_define } from '@/meta/index'
import type { require_order, t_reserv_candidates } from '@/types/billdata'
import { fill_ref_info, cell_formatter } from '@/utils/common'
import { onMounted, ref } from 'vue'
import { useDbStore } from '@/stores/modules/database'
import { useRouter } from 'vue-router'
import { list_reserv_candidates, make_reserv, release_reserv } from '@/utils/reservHelper'
import { e_code_prefix } from '@/types/enum'
import { ElMessageBox } from 'element-plus'
import copy from 'copy-to-clipboard'
const route = useRouter()
const dbStore = useDbStore()
const show_reserv = ref<boolean>()
const currentRequireOrder = ref<require_order>()
const tableColumns = require_order_define
const tableData = ref<require_order[]>()
const reserv_candidates = ref<t_reserv_candidates[]>()
const loadCurrent = (r: require_order) => {
  currentRequireOrder.value = r
  reserv_candidates.value = list_reserv_candidates(r)
}
const getRequireReservable = (currentRequireOrder?: require_order) => {
  if (!currentRequireOrder) return 0
  return (
    currentRequireOrder!.order_qty -
    currentRequireOrder!.reserved_qty -
    currentRequireOrder!.stockout_qty -
    currentRequireOrder!.locked_qty
  )
}
onMounted(() => {
  const tmp = dbStore.require_order
  fill_ref_info(tmp, require_order_define)
    .then(() => {
      tableData.value = tmp
    })
    .catch(() => {
      console.log('err')
    })
})
const reserv = (r: t_reserv_candidates) => {
  make_reserv(r, currentRequireOrder.value!)
  reserv_candidates.value = list_reserv_candidates(currentRequireOrder.value!)
}
const un_reserv = (r: t_reserv_candidates) => {
  release_reserv(r, currentRequireOrder.value!)
  reserv_candidates.value = list_reserv_candidates(currentRequireOrder.value!)
}
const print = (p: require_order) => {
  copy(p.billtype + '#' + p.order_bill)
  ElMessageBox.alert('条码号已复制到剪切板', '提示')
}
</script>
